<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>澜悦入库单</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- 引入样式 -->
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<style media="all">
    th{
        padding: 12px 0;
    }
</style>
</head>

<body>
    <div id="box" style="font-size:22px">


<table width="1000" style="font-size:18px" border="1" cellspacing="0" cellpadding="0">
<caption>
    <h2>澜悦入库单</h2>

</caption>

<tr>
  <th scope="col">订单编号</th>
  <th scope="col">{{form.sn}}</th>
  <th scope="col">采购员</th>
  <th scope="col"><span  v-for="item of admins"  v-if="form.admin_id == item.id">{{item.nick}}</span></th>
  <th scope="col"><p>门店/仓库</p></th>
  <th scope="col">{{form.shop}}/{{form.warehouse}}</th>
  <th scope="col">&nbsp;</th>
  <!-- <th scope="col" width="200">{{form.bak}}</th> -->
</tr>

    <!-- </table>

    <table width="1000" style="font-size:18px" border="1" cellspacing="0" cellpadding="0"> -->

  <tr>
      <th scope="col">序号</th>
    <th scope="col">产品名称</th>
    <th scope="col">供应商</th>
    <th scope="col">规格</th>
    <th scope="col">单位</th>
    <th scope="col">数量</th>
    <!-- <th scope="col">采购单价</th> -->
    <!-- <th scope="col">采购金额</th> -->
    <th scope="col">备注</th>
  </tr>
  <tr v-for="item,index in tableData">
       <th scope="col">{{index + 1 }}</th>
    <th>{{item.name}}</th>
    <th>{{item.supplier_text}}</th>
    <th>{{item.specs}}</th>
    <th>{{item.unit_text}}</th>
    <th>{{item.num}}</th>
    <!-- <th>{{item.price1}}</th> -->
    <!-- <th> {{ item.num * item.price1}}</th> -->
    <th>{{item.bak}}</th>
  </tr>
  <tr>
      <th>备注</th>
      <th colspan="6">{{form.bak}}</th>
  </tr>
  <tr>
      <th>签字</th>
      <th colspan="6">&nbsp;</th>
  </tr>
</table>

    </div>
</body>
</html>

<script type="text/javascript">
    var vm = new Vue({
    	el:"#box",
    	data:{
    		form:{
    			sn:'{$formData ? $formData['sn'] : $sn}',
    			admin_id:{$formData['admin_id']|default=''},
    			warehouse_id:{$formData ? $arr = json_encode([$formData['shop_id'],$formData['warehouse_id']]) : ''},
    			bak:'{$formData['bak']|default=''}',
    			shop:'{$formData['shop']|default=''}',
    			warehouse:'{$formData['warehouse']|default=''}',
    		},
    		admins:{:json_encode($admins)},
    		warehouses:{:json_encode($warehouses)},
    		products:{:json_encode($products)},
    		tableData:[],
    		defaultProduct:[],
    	},
    	created(){
    		this.defaultProduct = this.products[0];
        var data = {:json_encode($tableDate)};

          for(var i = 0; i< data.length;i++){
            console.log(data[i].product_id)
            this.tableData.push({
              product_id    : Number(data[i].product_id),
              name          : data[i].name,
              specs         : data[i].specs,
              unit_text     : data[i].unit_text,
              supplier_id   : data[i].supplier_id,
              supplier_text : data[i].supplier_text,
              unit_id       : data[i].unit_id,
              unit_text     : data[i].unit_text,
              price1        : data[i].price1,
              price2        : data[i].price2,
              num           : data[i].num,
              bak           : data[i].bak,
            })

          }

    	},
    	methods:{
    		onSubmit:function(status){
    			// console.log(this.form)
    			// console.log(this.tableData)
    			var that = this;
    			var param = this.form;
    			param.product = this.tableData;
          param.status = status;
    			param.id = {$formData.id};
    			axios.post('{:url('editDo')}', param).then(function (response) {
	                if(response.data.status === true){
	                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
	                    that.$message({
	                        type: 'success',
	                        message: response.data.message,
	                        onClose: function(){
	                            parent.layer.close(index); //再执行关闭
	                            // layer.close(layer.index);
	                            window.parent.location.reload();
	                        }
	                    })
	                }else{
	                    that.$message({
	                        type: 'error',
	                        message: response.data.message
	                    })
	                }
	            }).catch(function (error) {
	                console.log(error);
	            });



    		},
    		removeItem:function(idx){
    			this.tableData.splice(idx,1);
    		},
    		addPro:function(){
    			this.tableData.push({
    				product_id:this.defaultProduct.product_id,
            specs: this.defaultProduct.specs,
    				name: this.defaultProduct.product_name,
    				unit_text: this.defaultProduct.unit_text,
    				supplier_id: this.defaultProduct.supplier_id,
    				supplier_text: this.defaultProduct.supplier_text,
    				unit_id: this.defaultProduct.unit_id,
    				price1: this.defaultProduct.price1,
    				price2: this.defaultProduct.price1,
    				num:1
    			});
    		},
    		proSelect:function(idx){
    			var that = this;

			    let row = that.products.filter(function(p){
				     return p.product_id === that.tableData[idx].product_id;
				 })[0]
		       Object.keys(row).map(key => {

		          if (key !== 'product_id') {
		            that.$set(that.tableData[idx], key, row[key])
		          }
		        })

    		},
			getSummaries(param) {
				const { columns, data } = param;
				const sums = [];
				// console.log(data);
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价';
						return;
					}
			        if (index === 6) {
			            let count = 0
			            this.tableData.map(i => {
			              count += Number(i.num * i.price1)
			            })
			            sums[index] = count
			            return
			         }
				});

				return sums;
			}

    	}
    })
</script>
{include file="system@block/layui" /}
